<template>
  <div class="page">
    <div class="page-bd">
      <div class="page-block">
        <!-- tabs -->
        <el-row type="flex">
          <!-- 理科: 理科、艺术理 文史: 文史、艺术文  -->
					<div class="queryParams-row1" style="margin-right: 50px;">
						<span class="queryParams-row1__label">首选科目</span>
						<el-radio-group v-model="queryParams.majorType" class="queryParams-row1__group">
							<el-radio label="1">物理</el-radio>
							<el-radio label="2">历史</el-radio>
						</el-radio-group>
					</div>
					<div class="queryParams-row1">
						<span class="queryParams-row1__label">再选科目</span>
						<el-checkbox-group v-model="queryParams.subject" :max="2" class="queryParams-row1__group">
							<el-checkbox v-for="item in secondarilySubjects" :label="item.value" :key="item.value">
								{{ item.label }}
							</el-checkbox>
						</el-checkbox-group>
					</div>

          <el-tabs class="ui-tabs" @tab-click="exchangeTab" v-model="tabs.active" style="flex: 1; min-width: 0;">
            <el-tab-pane v-for="item in tabs.list" :key="item.id" :label="item.label" :name="item.value">
							<span slot="label">
								{{ item.label }}
							</span>
            </el-tab-pane>
          </el-tabs>
<!--					<el-button @click="onClickShowPrecedenceDialog" size="medium" type="primary">位次查询</el-button>-->
        </el-row>
				<div v-if="tabs.active.indexOf('本科普通批平行') !== -1" style="margin-bottom: 0;" class="chooseBlock-cell">
					<span class="chooseBlock-cell__label">招生类别</span>
					<el-checkbox-group class="ui-tbHeaderForm-elCheckbox" v-model="queryParams.recruitType">
						<el-checkbox v-for="item in recruitTypeList" :label="item.value" :key="item.value"
							:disabled="['普通志愿', '中外合办'].includes(item.value)"
							@change="onClickChooseBlockItem(item.label, 'recruitType');getTableData();">
							{{ item.label }}
						</el-checkbox>
					</el-checkbox-group>
				</div>
				<!-- input搜索区 -->
				<div style="padding-top: 10px;" class="ui-tbHeaderForm-searchCells">
					<div class="ui-tbHeaderForm-searchCell">
						<span class="ui-tbHeaderForm-searchCell__label" style="margin-right: 15px;">院校名称</span>
						<el-autocomplete style="width: 160px;" class="ui-tbHeaderForm-searchCell__value" v-model="queryParams.school"
							@blur="schoolBoolen = true" @focus="schoolBoolen = false" :fetch-suggestions="querySchoolSearch" @select="querySchoolGroupCode"
							placeholder="请输入内容" :trigger-on-focus="false">
						</el-autocomplete>
						<el-select class="ui-tbHeaderForm-searchCell__value" style="width: 80px;;padding-left: 10px;" :clearable="true" v-model="queryParams.checkGroupCode" placeholder="请选择" >
							<el-option v-for="item in checkGroupCodeList"
												 :key="item.value"
												 :label="item.label"
												 :value="item.value">
							</el-option>
						</el-select>
					</div>
					<div style="flex-shrink: 0; display: flex;">
						<div class="ui-tbHeaderForm-searchCell">
							<span class="ui-tbHeaderForm-searchCell__label">专业1</span>
							<el-autocomplete class="ui-tbHeaderForm-searchCell__value" v-model="queryParams.major1" :fetch-suggestions="queryMajorSearch"
								placeholder="请输入专业名称" :trigger-on-focus="false" style="width: 160px;">
							</el-autocomplete>
						</div>
						<div class="ui-tbHeaderForm-searchCell">
							<span class="ui-tbHeaderForm-searchCell__label">专业2</span>
							<el-autocomplete class="ui-tbHeaderForm-searchCell__value" v-model="queryParams.major2" :fetch-suggestions="queryMajorSearch"
								placeholder="请输入专业名称" :trigger-on-focus="false" style="width: 160px;">
							</el-autocomplete>
						</div>
						<div class="ui-tbHeaderForm-searchCell">
							<span class="ui-tbHeaderForm-searchCell__label">专业3</span>
							<el-autocomplete class="ui-tbHeaderForm-searchCell__value" v-model="queryParams.major3" :fetch-suggestions="queryMajorSearch"
								placeholder="请输入专业名称" :trigger-on-focus="false" style="width: 160px;">
							</el-autocomplete>
						</div>
						<div class="ui-tbHeaderForm-searchCell">
							<span class="ui-tbHeaderForm-searchCell__label">分数</span>
							<el-input class="ui-tbHeaderForm-searchCell__value" placeholder="请输入分数" style="width: 100px;" v-model="queryParams.fraction" :disabled="tqfrom"
								@input="Ipt(1)"></el-input>
						</div>
						<div class="ui-tbHeaderForm-searchCell">
							<span class="ui-tbHeaderForm-searchCell__label">位次</span>
							<el-input class="ui-tbHeaderForm-searchCell__value" placeholder="请输入位次" style="width: 100px;" v-model="queryParams.precedence" :disabled="tqfrom"
								@input="Ipt(2)"></el-input>
              <i class="el-icon-warning-outline" style="margin-left: 10px;font-size: 18px;color: #f96630;cursor: pointer" @click="onClickShowPrecedenceDialog"></i>
						</div>
					</div>
				</div>
        <section class="collapse">
          <div class="chooseBlock" :class="{ 'chooseBlock-close': collapseOpen === false }">
						<!-- <div v-if="tabs.active.indexOf('本科普通批平行') !== -1" class="chooseBlock-cell">
              <span class="chooseBlock-cell__label">招生类别</span>
              <el-checkbox-group class="ui-tbHeaderForm-elCheckbox" v-model="queryParams.recruitType">
                <el-checkbox v-for="item in recruitTypeList" :label="item.value" :key="item.value"
									:disabled="['普通志愿', '中外合办'].includes(item.value)"
									@change="onClickChooseBlockItem(item.label, 'recruitType')">
									{{ item.label }}
								</el-checkbox>
              </el-checkbox-group>
            </div> -->

            <div class="chooseBlock-cell">
              <span class="chooseBlock-cell__label">所在省份</span>
              <el-checkbox-group class="ui-tbHeaderForm-elCheckbox" v-model="queryParams.checkedCities">
                <el-checkbox v-for="item in cities" :label="item.value" :key="item.value"
									@change="onClickChooseBlockItem(item.label, 'checkedCities')">
									{{ item.label }}
								</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="chooseBlock-cell">
              <span class="chooseBlock-cell__label">院校类型</span>
              <el-checkbox-group class="ui-tbHeaderForm-elCheckbox" v-model="queryParams.checkedSchoolTypes">
                <el-checkbox v-for="item in SchoolTypes" :label="item.value" :key="item.value"
									@change="onClickChooseBlockItem(item.value, 'checkedSchoolTypes')">
									{{ item.value }}
								</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="chooseBlock-cell">
              <span class="chooseBlock-cell__label">博硕资格</span>
              <el-checkbox-group class="ui-tbHeaderForm-elCheckbox" v-model="queryParams.checkedQualifications">
                <el-checkbox v-for="item in Qualifications" :label="item.value" :key="item.value"
                  @change="onClickChooseBlockItem(item.value, 'checkedQualifications')">
									{{ item.label }}
								</el-checkbox>
              </el-checkbox-group>
            </div>
            <div class="chooseBlock-cell">
              <span class="chooseBlock-cell__label">院校层级</span>
              <el-checkbox-group class="ui-tbHeaderForm-elCheckbox" v-model="queryParams.checkedHierarchys">
                <el-checkbox v-for="item in Hierarchys" :label="item.value" :key="item.value"
                  @change="onClickChooseBlockItem(item.value, 'checkedHierarchys')">
									{{ item.label }}
								</el-checkbox>
              </el-checkbox-group>
            </div>
            <el-row type="flex">
              <div class="chooseBlock-cell" style="flex: 1; margin-bottom: 0;">
                <span class="chooseBlock-cell__label">办学性质</span>
                <el-checkbox-group class="ui-tbHeaderForm-elCheckbox" v-model="queryParams.checkedNatures">
                  <el-checkbox v-for="item in Natures" :label="item.value" :key="item.value"
                    @change="onClickChooseBlockItem(item.value, 'checkedNatures')">
										{{ item.label }}
									</el-checkbox>
                </el-checkbox-group>
              </div>
            </el-row>
          </div>
          <div class="collapse-tags" v-show="collapseOpen === false"
            :style="collapseOpen === false && 'min-height: 40px;'">
            <template
              v-for="(item) in ['checkedCities', 'checkedSchoolTypes', 'checkedQualifications', 'checkedHierarchys', 'checkedNatures']">
              <el-tag v-if="checkboxTagFilter(item)" @close="resetCheckBoxItem(item)" closable>
                {{ checkboxTagFilter(item) }}
              </el-tag>
            </template>
          </div>
          <el-row class="collapse-ft" type="flex" justify="end">
            <div style="flex-shrink: 0; display: flex; align-items: center; pointer-events: auto;">
							<el-dropdown @command="sortTable">
								<el-button style="margin-right: 10px;"  type="primary" size="medium">
									{{ queryParams.sortType | sortType2CN }}<i class="el-icon-arrow-down el-icon--right"></i>
								</el-button>
								<el-dropdown-menu slot="dropdown">
									<el-dropdown-item v-for="item in sortTypes" :key="item.value" :command="item.value">{{ item.label }}</el-dropdown-item>
								</el-dropdown-menu>
							</el-dropdown>

              <el-button type="primary" @click="getTableData()" size="medium">查询</el-button>
              <el-button @click="handleReset()" size="medium">重置</el-button>
              <span v-if="searchResult.list.length > 0" style="margin-left: 30px;margin-right: 15px;color: var(--primaryColor);">
                <span style="font-size: 14px; font-weight: 500;">
                  检索结果  {{ getSearchIndexByCurrentCode(searchResult.currentCode) }} / {{ searchResult.list.length }}
                </span>
                <span style="font-size: 16px; cursor: pointer;">
                  <span @click="toNextResultFn(-1)"><i class="el-icon-arrow-up searchResult-icon"></i></span>
                  <span @click="toNextResultFn(1)" style="margin-left: 4px"><i class="el-icon-arrow-down searchResult-icon"></i></span>
                </span>
              </span>
              <span @click="collapseOpen = !collapseOpen"
                style="margin-left: 120px; color: var(--primaryColor); cursor: pointer;">
                <img style="width: 17px; height: 17px; vertical-align: text-top;"
                  :style="collapseOpen === false && 'transform: rotateX(180deg);'"
                  src="~@/assets/images/programme-collapse.png" class="icon-home">
                {{ collapseOpen ? '收起' : '展开' }}
              </span>
            </div>
          </el-row>
        </section>
      </div>
			<!-- 表格区 -->
			<div style="margin: auto;overflow:auto">
				<!-- 普通 -->
				<virtual-scroll v-if="ptfrom" key="virtualScroll1"
					ref="virtualScroll"
					:data="tableData"
					:item-size="48"
					key-prop="id"
					@change="virtualList => (virtualScroll.tableData = virtualList)">
					<el-table class="ui-table" height="750px" row-key="id"
						v-loading="tableDataLoading" ref="multipleTable" :data="virtualScroll.tableData" :cell-style="cellStyle"
						:header-cell-style="{'text-align':'center'}"
						:row-class-name="tableTrClassName">
						<el-table-column prop="code" label="招生代码" width="80" align="center">
							<template slot-scope="props">
								<span @click="toggleExpand(props.row, props.$index)" :class="setCurrentCodeFontColor(props.row.code + '-' + props.row.groupCode)" style="cursor: pointer;">
									{{ props.row.code }}
									<i v-show="props.isExpanded" style="color: #ccc;" class="el-icon-caret-bottom"></i>
									<i v-show="!props.isExpanded" style="color: #ccc;" class="el-icon-caret-right"></i>
								</span>
							</template>
						</el-table-column>
						<el-table-column prop="schoolName" label="招生院校" align="left">
							<template slot-scope="scope">
								<span @click="details(scope.row)" style="cursor: pointer;font-size: 14px; display: inline-block;"
									v-html="showDate(scope.row.schoolName, '普通')"></span>
								<div style="cursor: pointer;font-size: 15px;display: inline-block;width: 8%;float: right;margin-right: 0.5em;">
									<i v-if="scope.row.schoolDesc" class="el-icon-warning-outline" style="font-size: 18px;color: #f96630;" @click="introduce(scope.row.schoolDesc)"></i>
								</div>
							</template>
						</el-table-column>
						<el-table-column align="center" prop="groupCode" label="专业组" width="60"></el-table-column>
						<el-table-column align="center" prop="subject" label="再选要求" width="70"></el-table-column>
						<el-table-column align="center" prop="recruitType" label="招生类别" width="66"></el-table-column>

						<el-table-column prop="toudang2015" label="计划数|投档数" class-name="mergeTh" align="center">
							<el-table-column prop="toudang2019" :label="nowYear - 2 + ''" class-name="mergeTh-child" align="center" width="90px"></el-table-column>
							<el-table-column prop="toudang2020" :label="nowYear - 1 + ''" class-name="mergeTh-child" align="center" width="90px"></el-table-column>
							<el-table-column prop="toudang2021" :label="nowYear + ''" class-name="mergeTh-child" align="center" width="90px">
								<template slot-scope="scope">
									<span class="font-strong">{{ scope.row.toudang2021 }}</span>
								</template>
							</el-table-column>
						</el-table-column>
						<el-table-column prop="shift_line2019" label="投档线" align="center" class-name="mergeTh">
							<el-table-column align="center" class-name="mergeTh-child" prop="shiftLine2019" :label="nowYear - 2 + ''" width="66px"></el-table-column>
							<el-table-column align="center" class-name="mergeTh-child" prop="shiftLine2020" :label="nowYear - 1 + ''" width="66px"></el-table-column>
							<el-table-column align="center" class-name="mergeTh-child" prop="shiftLine2021" :label="nowYear + ''" width="66px">
								<template slot-scope="scope">
									<span class="font-strong">{{ scope.row.shiftLine2021 }}</span>
								</template>
							</el-table-column>
						</el-table-column>
						<el-table-column prop="ranking2019" label="投档位次" align="center" class-name="mergeTh">
							<el-table-column align="center" class-name="mergeTh-child" prop="ranking2019" :label="nowYear - 2 + ''" width="60"></el-table-column>
							<el-table-column align="center" class-name="mergeTh-child" prop="ranking2020" :label="nowYear - 1 + ''" width="60"></el-table-column>
							<el-table-column align="center" class-name="mergeTh-child" prop="ranking2021" :label="nowYear + ''" width="60">
								<template slot-scope="scope">
									<span class="font-strong">{{ scope.row.ranking2021 }}</span>
								</template>
							</el-table-column>
						</el-table-column>
						<el-table-column align="center" prop="sortNum" label="院校排名" width="58px">
						</el-table-column>
						<el-table-column align="center" prop="level" label="层级属性" width="66px">
						</el-table-column>
						<el-table-column align="center" prop="city" label="所在城市" width="70px">
						</el-table-column>
						<el-table-column align="center" prop="manager" label="主管部门" width="66px">
						</el-table-column>
						<el-table-column align="center" prop="majorPlan" label="录取形式" width="66px">
						</el-table-column>
						<!-- <el-table-column align="center" prop="" label="招生类型" min-width="29px">
						</el-table-column> -->
						<el-table-column align="center" prop="plan2022" :label="PlanYear + '计划'" width="48px">
							<template slot-scope="scope">
								<span v-if="scope.row.plan2022 > scope.row.plan2021" class="icon-top">
									{{ scope.row.plan2022 }}<i>↑</i>
								</span>
								<span v-else-if="scope.row.plan2021 > scope.row.plan2022" class="icon-bottom">
									{{ scope.row.plan2022 }}<i>↓</i>
								</span>
								<span v-else>{{ scope.row.plan2022 }}</span>
							</template>
						</el-table-column>
						<!-- 展开后的表格 -->
						<virtual-column type="expand" width="1">
							<template slot-scope="props">
								<el-table class="ui-expandTable" :data="props.row.children1"
									:cell-style="cellStyles" :header-cell-style="{'text-align':'center'}">
									<el-table-column align="center" prop="majorCode" label="专业代码" width="95"></el-table-column>
									<el-table-column prop="majorName" label="专业名称" width="216">
										<template slot-scope="scope">
											<el-row type="flex" style="text-align: left; margin-right: 2em;">
												<span style="font-size: 14px; margin-right: 0.5em; flex: 1;" v-html="showDate(scope.row.majorName, '普通')"></span>
												<!-- row.color === 'red' -->
												<i v-if="scope.row.majorDesc" class="el-icon-warning-outline" style="font-size: 18px;color: #f96630;" @click="introduce(scope.row.majorDesc)"></i>
											</el-row>
										</template>
									</el-table-column>
									<el-table-column align="center" prop="level" label="包含专业及等级排名" width="260">
										<template slot-scope="scope">
											<div style="text-align: left;">{{ scope.row.level }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="msg2015" label="计划数 / 录取数  |  最高分 / 平均分 / 最低分| 最高位次-最低位次" class-name="mergeTh" align="center">
										<el-table-column prop="msg2015" :label="MajorNowYear - 2 + ''" class-name="mergeTh-child" min-width="100" align="center"></el-table-column>
										<el-table-column prop="msg2016" :label="MajorNowYear - 1 + ''" class-name="mergeTh-child" min-width="100" align="center"></el-table-column>
										<el-table-column prop="msg2017" :label="MajorNowYear + ''" class-name="mergeTh-child" min-width="100" align="center"></el-table-column>
									</el-table-column>
									<el-table-column prop="plan2018" :label="MajorPlanYear + '计划'" width="65" align="center">
										<template slot-scope="scope">
											<span v-if="scope.row.plan2018 > scope.row.plan2017" class="icon-top">{{ scope.row.plan2018 }}↑</span>
											<span v-else-if="scope.row.plan2017 > scope.row.plan2018" class="icon-bottom">{{ scope.row.plan2018 }}↓</span>
											<span v-else>{{ scope.row.plan2018 }}</span>
										</template>
									</el-table-column>
								</el-table>
							</template>
						</virtual-column>
					</el-table>
				</virtual-scroll>
				<!-- 提前批次 -->
				<virtual-scroll v-if="tqfrom" key="virtualScroll2"
					ref="virtualScroll"
					:data="tableData"
					:item-size="48"
					key-prop="id"
					@change="virtualList => (virtualScroll.tableData = virtualList)">
					<el-table class="ui-table" height="750px" row-key="id" v-loading="tableDataLoading" ref="multipleTable2" :data="virtualScroll.tableData"
						:cell-style="cellStyle"
						:header-cell-style="{'text-align':'center'}"
						:row-class-name="tableTrClassName">
						<el-table-column prop="code" label="院校代码" width="80px" align="center">
							<template slot-scope="props">
								<span @click="toggleExpand(props.row, props.$index)" :class="setCurrentCodeFontColor(props.row.code + '-' + props.row.groupCode)" style="cursor: pointer;">
									{{ props.row.code }}
									<i v-show="props.isExpanded" style="color: #ccc;" class="el-icon-caret-bottom"></i>
									<i v-show="!props.isExpanded" style="color: #ccc;" class="el-icon-caret-right"></i>
								</span>
							</template>
						</el-table-column>
						<el-table-column prop="schoolName" label="招生院校" align="left">
							<template slot-scope="scope">
								<span @click="details(scope.row)"
									style="cursor: pointer;font-size: 14px;margin-left: 0.5em;display: inline-block;"
									v-html="showDate(scope.row.schoolName, '提前')"></span>
								<div style="cursor: pointer;font-size: 15px;display: inline-block;width: 8%;float: right;margin-right: 0.5em;">
									<i v-if="scope.row.schoolDesc" class="el-icon-warning-outline" style="font-size: 18px;color: #f96630;" @click="introduce(scope.row.schoolDesc)"></i>
								</div>
							</template>
						</el-table-column>

						<el-table-column align="center" prop="groupCode" label="专业组" width="60"></el-table-column>
						<el-table-column align="center" prop="subject" label="再选要求" width="70"></el-table-column>
						<el-table-column align="center" prop="recruitType" label="招生类别" width="66"></el-table-column>

						<el-table-column prop="toudang2015" label="计划数|投档数" class-name="mergeTh" align="center">
							<el-table-column prop="toudang2019" :label="nowYear - 2 + ''" class-name="mergeTh-child" align="center" width="72px"></el-table-column>
							<el-table-column prop="toudang2020" :label="nowYear - 1 + ''" class-name="mergeTh-child" align="center" width="72px"></el-table-column>
							<el-table-column prop="toudang2021" :label="nowYear + ''" class-name="mergeTh-child" align="center" width="96px">
								<template slot-scope="scope">
									<span class="font-strong">{{ scope.row.toudang2021 }}</span>
								</template>
							</el-table-column>
						</el-table-column>

						<el-table-column prop="fluctuation2019" label="最高分/平均分/最低分" class-name="mergeTh" align="center">
							<el-table-column prop="shiftLine2019" :label="nowYear - 2 + ''" class-name="mergeTh-child" align="center" width="92px"></el-table-column>
							<el-table-column prop="shiftLine2020" :label="nowYear - 1 + ''" class-name="mergeTh-child" align="center" width="92px"></el-table-column>
							<el-table-column prop="shiftLine2021" :label="nowYear + ''" class-name="mergeTh-child" align="center" width="96px">
								<template slot-scope="scope">
									<span class="font-strong">{{ scope.row.shiftLine2021 }}</span>
								</template>
							</el-table-column>
						</el-table-column>
						<el-table-column prop="ranking2019" label="参考位次" class-name="mergeTh" align="center">
							<el-table-column prop="ranking2019" :label="nowYear - 2 + ''" class-name="mergeTh-child" align="center" width="50px"></el-table-column>
							<el-table-column prop="ranking2020" :label="nowYear - 1 + ''" class-name="mergeTh-child" align="center" width="50px"></el-table-column>
							<el-table-column prop="ranking2021" :label="nowYear + ''" class-name="mergeTh-child" align="center" width="52px">
								<template slot-scope="scope">
									<span class="font-strong">{{ scope.row.ranking2021 }}</span>
								</template>
							</el-table-column>
						</el-table-column>
						<!-- <el-table-column prop="xiancha" label="招生类别" min-width="30px">
						</el-table-column> -->
						<el-table-column prop="level" label="层级属性" width="70px" align="center">
						</el-table-column>
						<el-table-column prop="city" label="所在城市" width="70px" align="center">
						</el-table-column>
						<el-table-column prop="manager" label="主管部门" width="64px" align="center">
						</el-table-column>
						<el-table-column prop="plan2022" :label="PlanYear + '计划'" width="48px" align="center">
							<template slot-scope="scope">
								<span v-if="scope.row.plan2022 > scope.row.plan2021" class="icon-top">
									{{ scope.row.plan2022 }}<i>↑</i>
								</span>
								<span v-else-if="scope.row.plan2021 > scope.row.plan2022" class="icon-bottom">
									{{ scope.row.plan2022 }}<i>↓</i>
								</span>
								<span v-else>{{ scope.row.plan2022 }}</span>
							</template>
						</el-table-column>
						<!-- 提前批次 - 展后的表格 -->
						<virtual-column type="expand" width="1">
							<template slot-scope="props">
								<el-table class="ui-expandTable" :data="props.row.children1"
									:cell-style="cellStyles" :header-cell-style="{'text-align':'center'}">
									<el-table-column prop="majorCode" label="专业代码" width="95" align="center"></el-table-column>
									<el-table-column prop="majorName" label="专业名称" width="216" align="center">
										<template slot-scope="scope">
											<el-row type="flex" style="text-align: left; margin-right: 2em;">
												<span style="font-size: 14px; margin-right: 0.5em; flex: 1;" v-html="showDate(scope.row.majorName, '提前')"></span>
												<!-- row.color === 'red' -->
												<i v-if="scope.row.majorDesc" class="el-icon-warning-outline" style="font-size: 18px;color: #f96630;" @click="introduce(scope.row.majorDesc)"></i>
											</el-row>
										</template>
									</el-table-column>
									<el-table-column align="center" prop="level" label="包含专业及等级排名" width="260">
										<template slot-scope="scope">
											<div style="text-align: left;">{{ scope.row.level }}</div>
										</template>
									</el-table-column>
									<el-table-column prop="msg2015" label="计划数 / 录取数 | 最高分 / 平均分 / 最低分 | 最高位次-最低位次" class-name="mergeTh" align="center">
										<el-table-column prop="msg2015" :label="MajorNowYear - 2 + ''" class-name="mergeTh-child" align="center" min-width="100"></el-table-column>
										<el-table-column prop="msg2016" :label="MajorNowYear - 1 + ''" class-name="mergeTh-child" align="center" min-width="100"></el-table-column>
										<el-table-column prop="msg2017" :label="MajorNowYear + ''" class-name="mergeTh-child" align="center" min-width="100"></el-table-column>
									</el-table-column>
									<el-table-column prop="plan2018" :label="MajorPlanYear + '计划'" width="65" align="center">
										<template slot-scope="scope">
											<span v-if="scope.row.plan2018 > scope.row.plan2017" class="icon-top">{{ scope.row.plan2018 }}↑</span>
											<span v-else-if="scope.row.plan2017 > scope.row.plan2018" class="icon-bottom">{{ scope.row.plan2018 }}↓</span>
											<span v-else>{{ scope.row.plan2018 }}</span>
										</template>
									</el-table-column>
								</el-table>
							</template>
						</virtual-column>
					</el-table>
				</virtual-scroll>
			</div>
			<ChartDialog :dialog-visible.sync="precedenceDialog.open" title="位次查询"></ChartDialog>
			<!-- 学校简介 -->
			<el-dialog :visible.sync="schoolIntroduce.open" width="1000px" :close-on-click-modal="false"
				style="margin-top: 150px;">
				<div style="font-size: 16px;width: 100%;margin: auto;color: #000000;">
					{{ schoolIntroduce.data }}
				</div>
			</el-dialog>
    </div>
  </div>
</template>
<script>
import { request } from "@/util/request.js"
import ChartDialog from "./components/ChartDialog"
import VirtualScroll, { VirtualColumn } from 'el-table-virtual-scroll'

const natureOptions = [
	{ label: '不限', value: '不限' }, { label: '公办', value: '1' }, { label: '民办', value: '2' }, { label: '合办', value: '3' }
]
const HierarchyOptions = [
	{ label: '不限', value: '不限' }, { label: '双一流', value: '1' }, { label: '中央直管', value: '2' }, { label: '985', value: '3' }, { label: '211', value: '4' }, { label: '双高计划', value: '5' }, { label: '国家示范(骨干)', value: '6' }
]
const QualificationsOptions = [
	{ label: '不限', value: '不限' }, { label: '硕士点', value: '1' }, { label: '博士点', value: '2' }, { label: '研究生院', value: '3' }, { label: '自划线', value: '4' }, { label: '推免资格', value: '5' }
]
const defaultRecruitType = ['普通志愿','中外合办']

export default {
	components: {
		ChartDialog,
		VirtualScroll,
		VirtualColumn
	},
  data() {
    return {
      searchResult: {
        currentCode: '',
        list: [],
      },

			virtualScroll: {
				tableData: [],
			},
			schoolBoolen: false,
			schoolIntroduce: {
				data: null,
				open: false,
			},
			// 位次图表
			precedenceDialog: {
				open: false,
			},
			nowYear: null, 			// 当前数据年份
			PlanYear: null,				// xx年计划
      collapseOpen: false, // 展开收起标记
      studentInfo: [],
			secondarilySubjects: [
				{ label: '化学', value: '化学' },
				{ label: '生物', value: '生物' },
				{ label: '政治', value: '政治' },
				{ label: '地理', value: '地理' },
			],
			sortTypes: [
				{ value: 1, label: '按院校排序' },
				{ value: 2, label: '按专业组排序' },
			],
      tabs: {
				list: [
					{ label: '本科提前批单设', value: '本科提前批单设' },
					{ label: '本科提前批平行', value: '本科提前批平行' },
					{ label: '高职专科批提前', value: '高职专科批提前' },
					{ label: '本科普通批单设', value: '本科普通批单设' },
					{ label: '本科普通批平行', value: '本科普通批平行' },
					{ label: '高职专科普通批', value: '高职专科普通批' },
				],
				active: '本科普通批平行',
			},
			recruitTypeList: [
				// { label: '不限', value: '不限' },
				{ label: '普通志愿', value: '普通志愿' },
				{ label: '中外合办', value: '中外合办' },
				{ label: '国家专项', value: '国家专项' },
				{ label: '地方专项', value: '地方专项' },
				{ label: '定向就业', value: '定向就业' },
				{ label: '预科班', value: '预科班' },
			],
      cities: this.$constants.provinces,
			SchoolTypes: this.$constants.schoolTypes,
			Natures: natureOptions,
			Hierarchys: HierarchyOptions,
			Qualifications: QualificationsOptions,
      queryParams: {
				school: '', 	// 院校名称
				checkGroupCode: '', 	// 专业组code
				majorType: '1', // 首选科目
				subject: ['化学','生物'], // 再选科目
        checkedCities: ['不限'],
        checkedSchoolTypes: ['不限'],
        checkedNatures: ['不限'],
        checkedHierarchys: ['不限'],
        checkedQualifications: ['不限'],
				recruitType: ['普通志愿', '中外合办'],  // 类别
				major1: '', 			// 专业1
				major2: '', 			// 专业2
				major3: '', 			// 专业3
        fraction: null,   // 分数
        precedence: null, // 位次
				sortType: 2,
      },
			tableData: [],
			tableDataCount: 0,
			tableDataLoading: false,
      count: 0,
      // 专业列表
      majorList: [
				{ value: '1',label: '专业1' },
				{ value: '2',label: '专业2' },
				{ value: '3',label: '专业3' },
				{ value: '4',label: '专业4' },
				{ value: '5',label: '专业5' },
				{ value: '6',label: '专业6' },
				{ value: '7',label: '备选' },
				{ value: '8',label: '取消' },
			],
      disabledFlag: false,
			checkGroupCodeList: [],
    }
  },

	filters: {
		sortType2CN(type) {
			return {
				1: '按院校排序',
				2: '按专业组排序',
			}[type] || '请选择'
		}
	},

  created() {
    if (this.tabs.active.indexOf('提前') !== -1) {
      this.tqfrom = true
      this.ptfrom = false
      this.disabledFlag = true;
    } else {
      this.tqfrom = false
      this.ptfrom = true
    }
    this.getDataYearOfDict()
		this.getTableData()
  },
  mounted() { },
  methods: {
		Ipt(type) {
			if (type == 1) {
				this.queryParams.precedence = null
			} else if (type == 2) {
				this.queryParams.fraction = null
			}
		},
		onClickShowPrecedenceDialog() {
			this.precedenceDialog.open = true
		},
    checkboxTagFilter(value) {
			if (this.queryParams[value]) {
				return this.queryParams[value].filter(item => item !== '不限')
								.map(item => {
									if (['checkedNatures', 'checkedHierarchys', 'checkedQualifications'].includes(value)) {
										let arrayKey = value.replace('checked', '')
										let findVal = this[arrayKey].find(i => i.value === item)
										return findVal.label || item
									}
									return item
								})
								.join(',')
			}
			return ''
		},

    queryMajorSearch(queryString, cb) {
			request({
				method: 'get',
				url: 'schoolV2/getMajorName?majorName='+queryString,
			}).then(res => {
				var restaurants = res.data;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			})
		},
		createFilter(queryString) {
			return (restaurant) => {
				return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
			};
		},
		querySchoolSearch(queryString, cb) {
      this.checkGroupCodeList = []
			request({
				method: 'post',
				url: 'schoolV2/getSchoolName',
				params: {
					majorType: this.queryParams.majorType,
					batch: this.tabs.active,
					schoolName: queryString,
				}
			}).then(res => {
				var restaurants = res.data;
				var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
				// 调用 callback 返回建议列表的数据
				cb(results);
			})
		},
    querySchoolGroupCode () {
      request({
        method: 'post',
        url: 'schoolV2/getGroupCode',
        data: {
          majorType: this.queryParams.majorType,
          recruitType: this.queryParams.recruitType,
          batch: this.tabs.active,
          subject: this.queryParams.subject,
          school: this.queryParams.school,
        }
      }).then(res => {
        this.checkGroupCodeList = res.data;
      })
    },
		createFilter1(queryString) {
			return (restaurant) => {
				return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) !== -1);
			};
		},

		onClickChooseBlockItem(value, propName){
			this.school = null
			this.major = null
			if (['不限', '其他'].includes(value)) {
				return this.queryParams[propName] = [value]
			}
			this.queryParams[propName].forEach(item => {
				if(['不限', '其他'].includes(item)){
					this.queryParams[propName].splice(this.queryParams[propName].indexOf(item), 1)
				}
			})
			if (this.queryParams[propName].length === 0) {
				this.queryParams[propName] = ['不限']
			}
		},

		resetCheckBoxItem(dataProp) {
			this.queryParams[dataProp] = ['不限']
		},

		handleReset() {
      this.queryParams = {
				...this.queryParams,
				school: '', 	// 院校名称
				checkGroupCode: '', 	// 专业组code
				// majorType: '1', // 首选科目
				// subject: ['化学','生物'], // 再选科目
        checkedCities: ['不限'],
        checkedSchoolTypes: ['不限'],
        checkedNatures: ['不限'],
        checkedHierarchys: ['不限'],
        checkedQualifications: ['不限'],
				// recruitType: ['不限'],  // 类别
				major1: '', 			// 专业1
				major2: '', 			// 专业2
				major3: '', 			// 专业3
        fraction: null,   // 分数
        precedence: null, // 位次
				sortType: 2, 			// 按学校名称排序 向上就传1 向下传2
      }
			// this.tabs.active = '本科普通批平行'
			//重置之后自动搜索返回顶部
			this.getTableData();
			this.goTableTop();
		},

		getDataYearOfDict() {
			this.$api.getDict({ dictType: this.tabs.active }).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
				console.log('getDataYearOfDict', res.data);
				res.data.forEach(item => {
					if(item.dictName === 'now'){
						this.nowYear = item.dictValue
					}else if (item.dictName == "plan") {
						this.PlanYear = item.dictValue
					}
					else if (item.dictName == "majornow") {
						this.MajorNowYear = item.dictValue
					} else if (item.dictName == "majorplan") {
						this.MajorPlanYear = item.dictValue
					}
				})
			})
		},

    resetSearchResult() {
      this.searchResult = {
        currentCode: '',
        list: [],
      }
    },
    // 获取当前currentCode下标
    getSearchIndexByCurrentCode () {
      if (!this.searchResult.currentCode) return
      let index = this.searchResult.list.findIndex(item => item === this.searchResult.currentCode);
      return index + 1
    },

    // 检索结果上一个下一个
    toNextResultFn(number) {
      const searchIndex = this.searchResult.list.findIndex(item => item === this.searchResult.currentCode);
      let toIndex = searchIndex + number
      if (searchIndex + number < 0) {
        toIndex = this.searchResult.list.length - 1
      }
      else if (searchIndex + number >= this.searchResult.list.length) {
        toIndex = 0
      }
      let realCode = this.searchResult.list[toIndex]
      this.searchResult.currentCode = realCode
      let realIndex = this.tableData.findIndex(item => `${item.code}-${item.groupCode}` === realCode)
      this.$refs.virtualScroll.scrollTo(realIndex)
    },

    setCurrentCodeFontColor(code) {
      let classes = '';
      if (this.searchResult.currentCode === code) {
        classes = 'searchResult-currentCode'
      }
      return classes;
    },

		exchangeTab(){
      this.getDataYearOfDict();
      this.handleReset();
			this.getTableData();
		},
		getTableData() {
			if(this.queryParams.subject.length < 2){
				return this.$message.error('再选科目不得少于两个！');
			}
      this.resetSearchResult()
			this.tableDataLoading = true
			request({
				method: 'post',
				url: '/schoolV2/getSchoolInformations',
				data: {
					...this.queryParams,
					batch: this.tabs.active,
					checkedCities: undefined,
					checkedSchoolTypes: undefined,
					checkedQualifications: undefined,
					checkedHierarchys: undefined,
					checkedNatures: undefined,
					hierarchys: this.queryParams.checkedHierarchys.filter(item => item !== '不限').join('|'),
					qualifications: this.queryParams.checkedQualifications.filter(item => item !== '不限').join('|'),
					type: this.queryParams.checkedSchoolTypes.filter(item => item !== '不限'),
					nature: this.queryParams.checkedNatures.filter(item => item !== '不限'),
					city: this.queryParams.checkedCities.filter(item => item !== '不限'),
					recruitType: this.tabs.active.indexOf('本科普通批平行') !== -1
												? this.queryParams.recruitType.filter(item => item !== '不限')
												: [],
				}
			}).then(res => {
				if (![0, 200].includes(res.code)) {
					return this.$message.error(res.msg)
				}
        if (this.tabs.active.indexOf('提前') !== -1) {
          this.tqfrom = true
          this.ptfrom = false
          this.disabledFlag = true;
        } else {
          this.tqfrom = false
          this.ptfrom = true
        }
				this.tableData = res.data
				this.tableDataCount = res.searchTotal
				this.tableDataLoading = false
        let result = this.tableData.filter(item => item.color === 1)
        this.searchResult.list = result.map(item => `${item.code}-${item.groupCode}`)
				this.dingweiSchool()
			})
		},

		scrollByTableKeyword() {
			let keywordClass
			if (this.tabs.active.indexOf('提前') !== -1) {
				keywordClass = "Tqseat";
			} else if (this.tabs.active.indexOf('普通') !== -1) {
				keywordClass = "Ptseat";
			}
			this.tableData.forEach(i => {
				if (this.queryParams.school && i.schoolName.indexOf(this.queryParams.school) !== -1) {
					i.newColor = 2
				}
			});

			let num = document.getElementsByClassName(keywordClass).length;
			console.log('num', num);
			if (num != 0) {  //如果查询关键词存在，跳到第一个关键词的位置
				// this.count = num
				document.getElementsByClassName(keywordClass)[0].scrollIntoView({block: "center"}); //scrollIntoView方法只在原生document中可以使用，jquery中没有这个方法，参数默认是true，将这个元素置于页面第一行（如果页面可以滑动函数才生效）
			} else {
				this.$message.error('无匹配结果！');
			}
		},

		// 分数和位次在表格中的定位
		dingweiSchool(){
      const scrollToRowByIndex = (index) => {
        if (index === -1) {
          return this.$message.error('无匹配结果')
        }
        this.$refs.virtualScroll.scrollTo(index)
        if (this.searchResult.list.length > 0) {
          this.searchResult.currentCode = `${this.tableData[index].code}-${this.tableData[index].groupCode}`
        }
      }
			if(this.queryParams.school != null && this.queryParams.school != ""){
				let batch='普通';
				if(this.tabs.active.indexOf('提前') !== -1){
					batch="提前";
				}
				let checkGroupCode = this.queryParams.checkGroupCode;
				let index = this.tableData.findIndex(i => {
					if(checkGroupCode != ''){
						if(i.schoolName == this.queryParams.school && i.groupCode == checkGroupCode){
							return true
						}
					}else if(i.schoolName == this.queryParams.school){
						return true
					}
				});
				scrollToRowByIndex(index)
			}else if(this.queryParams.fraction != null && this.queryParams.fraction != ""){
				let batch='普通';
				if(this.tabs.active.indexOf('提前') !== -1){
					batch="提前";
				}
				this.queryParams.precedence=null;
				let isOne = 0;
				let findIndex = null
				let fraction = this.queryParams.fraction;
				while(isOne==0){
					findIndex = this.tableData.findIndex(i=>{
            if(this.queryParams.sortType == 1){
              if(i.proposedScore==fraction){
                i.newColor = 2
                isOne=1;
                return true
              }
            }else{
              if(i.groupProposedScore==fraction){
                i.newColor = 2
                isOne=1;
                return true
              }
            }
					})
					if(fraction>150){
						fraction--;
					}else{
						isOne=1;
					}
				}
        scrollToRowByIndex(findIndex)
			}else if(this.queryParams.precedence!=null&&this.queryParams.precedence!=""){
				let batch = '普通';
				if(this.tabs.active.indexOf('提前') !== -1){
					batch = "提前";
				}
				this.queryParams.fraction = null;
				let precedence = this.queryParams.precedence
				let index = this.tableData.findIndex(i => {
          if(this.queryParams.sortType == 1){
            if(precedence <= i.proposedwc){
              i.newColor = 2
              return true
            }
          }else {
            if(precedence <= i.groupProposedwc){
              i.newColor = 2
              return true
            }
          }
				});
				scrollToRowByIndex(index)
			}else {
				let batch = '普通';
				if(this.tabs.active.indexOf('提前') !== -1){
					batch = "提前";
				}
				let index = this.tableData.findIndex(i => i.color == 1);
				index !== -1 && scrollToRowByIndex(index)
			}
		},
		sortTable(command) {
			this.queryParams.sortType = command
			this.getTableData()
		},

		toggleExpand(row) {
      let tableDataIndex = this.tableData.findIndex(item => item.id == row.id)
			if (!row.$v_expanded) {
        this.tableData.filter(item => item.$v_expanded === true).forEach(item => {
          this.$refs.virtualScroll.toggleRowExpansion(item, false)
        })
				request({
					method: 'post',
					url: 'schoolV2/getSchoolMajor',
					data: {
						schoolCode: row.code,
						majorType: this.queryParams.majorType,
						major1: this.queryParams.major1,
						major2: this.queryParams.major2,
						major3: this.queryParams.major3,
						groupCode: row.groupCode,
					}
				}).then(res => {
					this.$set(this.tableData[tableDataIndex], "children1", res.data)
					this.$refs.virtualScroll.toggleRowExpansion(row)
          this.$refs.virtualScroll.scrollTo(tableDataIndex)
          this.$refs.virtualScroll.update()
				})
			} else {
				this.$refs.virtualScroll.toggleRowExpansion(row)
        this.$refs.virtualScroll.scrollTo(tableDataIndex)
        this.$refs.virtualScroll.update()
			}
    },
		// 执行点击行调用的方法，展开和折叠行
		clickTable(row, index) {
			console.log(index);
			let state = false
			// state = true 收起时清空children数据
			let result = this.tableData.find(item => item.id == row.id)
			if (result && result.children != null) {
				state = true
				result.children = null
			}
			row.isExpanded = state
			if (state == false) {
				this.getSchoolMajor(row, index)
			} else {
				this.$refs.multipleTable && this.$refs.multipleTable.toggleRowExpansion(row)
				this.$refs.multipleTable1 && this.$refs.multipleTable1.toggleRowExpansion(row)
				this.$refs.multipleTable2 && this.$refs.multipleTable2.toggleRowExpansion(row)
			}

		},

		getSchoolMajor(row) {
			request({
				method: 'post',
				url: 'schoolV2/getSchoolMajor',
				data: {
					schoolCode: row.code,
					majorType: this.queryParams.majorType,
					major1: this.queryParams.major1,
					major2: this.queryParams.major2,
					major3: this.queryParams.major3,
					groupCode: row.groupCode,
				}
			}).then(res => {
				let tableDataIndex = this.tableData.findIndex(item => item.id == row.id)
				this.$set(this.tableData[tableDataIndex], "children", res.data)
				this.$forceUpdate()
				this.$refs.multipleTable && this.$refs.multipleTable.toggleRowExpansion(row)
				this.$refs.multipleTable1 && this.$refs.multipleTable1.toggleRowExpansion(row)
				this.$refs.multipleTable2 && this.$refs.multipleTable2.toggleRowExpansion(row)
			})
		},

		// 搜索后高亮显示某行
		cellStyle({ row, column, rowIndex, columnIndex }) {
			let styleClass = ''
			// color:1 td checkbox搜索结果匹配时
			// newColor === 2 td分数与位次的激活样式
			if (row.newColor === 2){
				styleClass += `backgroundColor: var(--orange01); color: blue`;
			}else if (row.color === 1){
				styleClass += `backgroundColor: var(--orange01);`;
			}
			//招生类别样式
			if (this.tabs.active == "本科普通批平行" && !defaultRecruitType.includes(row.recruitType) && column.property=="recruitType"){
				styleClass += `color: #39B830`;
			}
			//院校查询样式
			if (this.queryParams.school != null && this.queryParams.school != "" && this.queryParams.school == row.schoolName && column.property=="schoolName"){
				let checkSchoolCode = this.queryParams.checkGroupCode;
				if(checkSchoolCode != ''){
					if(this.queryParams.checkGroupCode == row.groupCode){
						styleClass += `color: red; font-style: italic;`;
					}
				}else {
					styleClass += `color: red; font-style: italic;`;
				}
			}
			return styleClass
		},
		// 搜索后高亮显示某行--用于展开后的表格样式
		cellStyles({ row, column, rowIndex, columnIndex }) {
			let styleClass = ''
			if (row.color === 'red') {
				styleClass = `color: var(--primaryColor)`;
			}
			return styleClass
		},

		showDate(val, batch) {
			if (this.schoolBoolen != true) {
				return val
			}
			val = val + '';
			if (val.indexOf(this.queryParams.school) !== -1 && this.queryParams.school !== '') {
				if (batch == "提前") {
					return val.replace(this.queryParams.school, '<em class="Tqseat">' + this.queryParams.school + '</em>')
				} else if (batch == "特殊") {
					return val.replace(this.queryParams.school, '<em class="Tsseat">' + this.queryParams.school + '</em>')
				}
				return val.replace(this.queryParams.school, '<em class="Ptseat">' + this.queryParams.school + '</em>')
			}
			return val
		},

		introduce(row) {
			this.schoolIntroduce.data = row
			this.schoolIntroduce.open = true
		},

		tableTrClassName(row) {
			let batch = "普通";
			if (['提前批A段', '提前批B段', '提前批C段', '提前批专科'].includes(this.batch)) {
				batch = "提前";
			}
			let name = batch + row.row.code + row.row.groupCode + 'school'
			return name;
		},

		details(row) {
			const infos = row;
			localStorage.setItem('infos', JSON.stringify(infos))
			const routeData = this.$router.resolve({
				name: 'school',
				params: {
					info: infos
				}
			})
			window.open(routeData.href, '_blank')
		},
		goTableTop () {
			this.$refs.virtualScroll.scrollTo(0)
		}
  }
}

</script>


<style lang="stylus" scoped>
.ui-tbHeaderForm-elCheckbox /deep/ .el-checkbox__input.is-disabled + span.el-checkbox__label {
	color: #f96630;
}
</style>

<style lang="stylus" scoped>
createIconStyle(size, align = text-top) {
	width size
	height size
	vertical-align align
	flex-shrink 0
}
textLabelStyle() {
	font-size: 14px;
	color: #333;
	flex-shrink: 0;
	margin-right: 15px;
	// line-height: 34px;
}
.searchResult-currentCode {
  color #f00
}
.searchResult-icon {
  padding 2px
  &:hover {
    background #e1e5fa
    border-radius 4px
  }
}
.font-strong
	font-weight: bold;
.queryParams-row1
	display flex
	align-items: center;
	textLabelStyle()
	// line-height 1
	&__label
		margin-right 15px
		line-height: 1;
	&__group /deep/
		display flex
		align-items center
		.el-radio__input
			font-size: 14px;
		.el-radio__label
			font-size: 14px;
.el-icon-caret-bottom
	color #ccc
	font-size 10px
.icon-top
	color #39B830
.icon-bottom
	color #f56c6c
.icon-info
	createIconStyle(20px)
	cursor pointer
.page
	&-bd
		width BodyMaxWidth
		margin 10px auto 60px auto
		box-sizing border-box
	&-block
		uiBlock();
		padding 20px
		margin-bottom 20px
.breadcrumb
	font-size: 16px;
	font-weight: 400;
	color: #333333;
	padding 19px 23px 19px 23px
	.icon-home
		width 18px
		height 18px
		vertical-align: top;
		margin-right 5px

.el-icon-caret-right
	display none

.ui-tabs /deep/
	margin-right 40px
	--tabsPadding 10px
.collapse
	position relative
	&-ft
		position absolute
		bottom 0
		right 0
		width 100%
		pointer-events none
	&-tags
		margin-right 528px
		/deep/ .el-tag
			margin 10px 10px 0 0

#npt {
	position: fixed !important;
	right: 20px;
	top: 200px;
}

#npt button {
	color: white;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	font-size: 15px;
	font-weight: initial;
	padding: 0;
	text-align: center;
}

#npt button span {
	display: inline-block;
	margin: auto;
}

.scheme{
	color: var(--primaryColor);
}
.not-scheme{
	color: #333;
}
</style>
